<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>学生管理</title>
<link rel="stylesheet" href="../static/layui/css/layui.css">
<style>    
  .layui-body{ padding: 10px;}
  .fen{margin:5px auto}
  .fenye{font-size:26px;}
</style>
</head>
<body>
	<br>
	<h2>学生管理</h2><br>

	<!-- 按钮区 -->
	<div class="site-demo-button" id="layerDemo" style="margin-bottom: 0;">
	  <button class="layui-btn">创建账号</button>
	  <button class="layui-btn">学生管理</button>
	  <button data-method="notice" class="layui-btn">导入学生</button>
	</div></br>

   <!-- 主体内容区 -->
   <hr/>
   <table class="layui-table">
	  <colgroup>
	    <col width="100">
	  </colgroup>
	 <thead>
	     <tr>
	        <th><input type="checkbox"/></th>
	        <th>姓名</th><th>性别</th><th>班级</th><th>电话</th><th>操作</th>
	     </tr>
     </thead>
     <tbody>
     
     </tbody>
   </table>
   <div id="paging"></div>   
   
</body>
<script type="text/javascript" src="../static/js/jquery.min.js"></script>
<script type="text/javascript" src="../static/layui/layui.js"></script>
<script>
//渲染表格
layui.use('laypage', function(){
  var laypage = layui.laypage;
  $.get("/OnlineExam1/admin/student?m=count",function(data,status){
	  console.log(data)
  n = data
  //执行一个laypage实例
  laypage.render({
    elem: 'paging' //注意，这里的 test1 是 ID，不用加 # 号
    ,count: n //数据总数，从服务端得到
    ,jump: function(obj, first){
    //obj包含了当前分页的所有参数，比如：
    console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
    
    $.get("http://localhost:8080/OnlineExam1/admin/student?m=page&p="+obj.curr,function(data,ststus){
        var tbody = $("tbody");
        tbody.empty();
        
        $.each($.parseJSON(data),function(index,value){
          var tr =$("<tr></tr>");
          var td1 =$( "<td></td>")
          var input =$("<input type='checkbox'>")
          //var date = new Date(value.update_time)
          td1.append(input);
          tr.append(td1);
          tr.append($("<td>"+value.user_name+"</td>"));
          tr.append($("<td>"+value.user_sex+"</td>"));
          tr.append($("<td><a href='class_manage.jsp'>"+value.class_name+"</a></td>"));
          tr.append($("<td>"+value.user_phone+"</td>"));

          var td2=($("<td style='text-align: center;'></td>"))
          var button1=($("<button class='layui-btn' id='btn_pre' user_id='"+value.user_id+"'>预览</button>"));
          var button2=($("<button class='layui-btn layui-btn-warm'><a href='/OnlineExam1/admin/student?m=update&uid="+value.user_id+"' style='color: white;'>修改</a></button>"));
          var button3=($("<button class='layui-btn layui-btn-danger' id='btn_del' user_id='"+value.user_id+"'>删除</button>"));
          td2.append(button1)
          td2.append(button2)
          td2.append(button3)
          tr.append(td2)
          tbody.append(tr);
        })
      })
      
      $(document).on('click','#btn_del',function(){
        var id=$(this).attr("user_id")
        layer.confirm('确定要删除该用户吗?',{btn:['确定','取消'],title:'提示'},function(index){

        location.href="/OnlineExam1/admin/student?m=del&id="+id
        layer.close(index);
        })
      })
      
      $(document).on('click','#btn_pre',function(){
      	var id=$(this).attr("user_id")
      	$.get("/OnlineExam1/admin/student?m=find&id="+id,function(data,status){
				//var value = $.parseJSON(data);
				var value=JSON.parse(data);
				console.log(value);
				layer.open({
          		title : "查看信息",
          		area: ['500px', '550px'],
          		content : "<table class='layui-table' lay-skin='line'>"+
				"<tr><th style='background-color: rgb(226, 226, 226);width: 100px;'>用户名</th>"+
				"<td>"+value[0].user_name+"</td></tr>"+
		        "<tr><th style='background-color: rgb(226, 226, 226);width: 100px;'>密码</th>"+
		        "<td>"+value[0].user_password+"</td></tr>"+
		        "<tr><th style='background-color: rgb(226, 226, 226);width: 100px;'>班级</th>"+
		        "<td>"+value[0].class_name+"</td></tr>"+
		        "<tr><th style='background-color: rgb(226, 226, 226);width: 100px;'>性别</th>"+
		        "<td>"+value[0].user_sex+"</td></tr>"+
		        "<tr><th style='background-color: rgb(226, 226, 226);width: 100px;'>电话</th>"+
		        "<td>"+value[0].user_phone+"</td></tr>"+
		        "<tr><th style='background-color: rgb(226, 226, 226);width: 100px;'>微信</th>"+
		        "<td>"+value[0].user_wx+"</td></tr>"+
		        "<tr><th style='background-color: rgb(226, 226, 226);width: 100px;'>描述</th>"+
		        "<td>"+value[0].user_desc+"</td></tr>"+
		        "<tr><th style='background-color: rgb(226, 226, 226);width: 100px;'>头像</th>"+
		        "<td>"+value[0].user_avatar+"</td></tr>"+
		        "</table>"
          	})
      	})
      })
    //首次不执行
    if(!first){
      //do something
    }
  }
  });
  })
});
//导入文件
layui.use('layer', function(){ //独立版的layer无需执行这一句
	  var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句

	  //触发事件
	  var active = {
	    notice: function(){
	      //示范一个公告层
	      layer.open({
	        type: 1
	        ,title: false //不显示标题栏
	        ,closeBtn: false
	        ,area: '500px;'
	        ,shade: 0.8
	        ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
	        ,btn: ['下载模板', '关闭']
	        ,btnAlign: 'c'
	        ,moveType: 1 //拖拽模式，0或者1
	        ,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">'+
		        '导入学生<br><br>操作说明<br>'+
		        '1、下载 Excel格式模板 文件，并按照模板格式填写。<br>'+
	        	'2、导入前请仔细核对Excel数据的正确性。<br>'+
	        	'<br>批量导入<br>'+
	        	'<form action="../upload" method="post"  enctype="multipart/form-data">'+
   	                   '<input type="file" name="stufile" />'+
   	                   '<input type="submit" value="批量导入" />'+
   				'</form></div>'

	        ,success: function(layero){
	          var btn = layero.find('.layui-layer-btn');
	          btn.find('.layui-layer-btn0').attr({
	            href: 'http://localhost:8080/OnlineExam1/excel'
	            ,target: '_black'
	          });
	        }
	      });
	    }
	  };
	  //点击导入excel表格
	  $('#layerDemo .layui-btn').on('click', function(){
	    var othis = $(this), method = othis.data('method');
	    active[method] ? active[method].call(this, othis) : '';
	  }); 
});
//按钮切换
$(function(){
    $("button:eq(0)").click(function(){
    	window.location.href='http://localhost:8080/OnlineExam1/admin/student?m=addUser'
    });

    $("button:eq(1)").click(function(){
    	window.location.href='http://localhost:8080/OnlineExam1/admin/student_manage.jsp'
    }); 
});
</script>
</html>